<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import {
    ResApiById,
    ResApiDeleteById,
    ResApiPage,
    ResApiSave,
    ResApiUpdate,
  } from '@/api/ResApiApi';

  const updateRequest = ref({
    method: null,

    path: null,

    name: null,

    id: '',
  });
  const visibleShow = ref(false);
  const handleCancelShow = () => {
    visibleShow.value = false;
  };
  const handleOkShow = () => {
    visibleShow.value = false;
  };
  const visibleUpdate = ref(false);
  const handleCancelUpdate = () => {
    visibleShow.value = false;
  };

  const columns = [
    {
      title: '请求方式',
      dataIndex: 'method',
      slotName: 'method',
    },

    {
      title: '请求地址',
      dataIndex: 'path',
      slotName: 'path',
    },

    {
      title: '接口名称',
      dataIndex: 'name',
      slotName: 'name',
    },
    {
      title: '操作列',
      dataIndex: 'operations',
      slotName: 'operations',
    },
  ];
  const response = ref([]);
  const visible = ref(false);
  const pagination = reactive({
    current: 0,
    pageSize: 10,
  });
  const queryRequest = ref({
    method: null,

    path: null,

    name: null,
  });
  const search = async () => {
    console.log('search');

    const { data } = await ResApiPage(queryRequest.value, {
      pageSize: 10,
      current: 0,
    });
    response.value = data.records;
    pagination.total = data.total;
    pagination.current = data.current;
    console.log(data);
  };

  const onPageChange = async (current: number) => {
    pagination.current = current;
    const param = {
      pageSize: pagination.pageSize,
      current,
    };
    const { data } = await ResApiPage(queryRequest.value, param);
    response.value = data.records;
  };

  const fetchData = async () => {
    const { data } = await ResApiPage(queryRequest.value, pagination);
    response.value = data.records;
    pagination.total = data.total;
    pagination.current = data.current;
    console.log(data);
  };
  const reset = async () => {
    console.log('reset');
    queryRequest.value = {};
    const { data } = await ResApiPage(queryRequest.value, {
      current: 0,
      pageSize: 10,
    });
    response.value = data.records;
    pagination.total = data.total;
  };
  const createRequest = ref({
    method: null,

    path: null,

    name: null,
  });

  const handleOkCreate = async () => {
    await ResApiSave(createRequest.value).then((res) => {
      if (res.code === 20000) {
        Message.success('创建成功');
        createRequest.value = {};
        visible.value = false;
        reset();
      } else {
        Message.error('创建失败');
        createRequest.value = {};
      }
    });
  };
  const handleCancelCreate = () => {
    createRequest.value = {};
    visible.value = false;
  };

  const show = async (record: any) => {
    const { data } = await ResApiById(record.id);
    updateRequest.value = data;
    visibleShow.value = true;
    console.log('show');
  };
  const update = async (record: any) => {
    const { data } = await ResApiById(record.id);
    visibleUpdate.value = true;
    updateRequest.value = data;
    console.log('update');
  };
  const delte = async (record: any) => {
    console.log('delete');
    const { code } = await ResApiDeleteById(record.id);
    if (code === 20000) {
      Message.success('删除成功');
      reset();
    } else {
      Message.success('删除失败');
    }
  };
  onMounted(async () => {
    await fetchData();
  });
  const handleOkUpdate = async () => {
    const { code } = await ResApiUpdate(updateRequest.value);
    if (code === 20000) {
      Message.success('修改成功');
      visibleShow.value = false;
      reset();
    } else {
      Message.error('修改失败');
    }
  };
</script>

<template>
  <div>
    <div class="container">
      <a-card title="接口管理" class="general-card">
        <a-row>
          <a-col :flex="1">
            <a-form
              :label-col-props="{ span: 6 }"
              :model="queryRequest"
              :wrapper-col-props="{ span: 18 }"
              label-align="left"
            >
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-form-item field="method" label="请求方式">
                    <a-select
                      v-model="queryRequest.method"
                      :style="{ width: '320px' }"
                      placeholder="请选择请求方式"
                    >
                      <a-option>GET</a-option>
                      <a-option>POST</a-option>
                      <a-option>DELETE</a-option>
                      <a-option>PUT</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item field="path" label="请求地址">
                    <a-input
                      v-model="queryRequest.path"
                      placeholder="请输入请求地址"
                    >
                    </a-input>
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item field="name" label="接口名称">
                    <a-input
                      v-model="queryRequest.name"
                      placeholder="请输入接口名称"
                    >
                    </a-input>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
          <a-divider direction="vertical" style="height: 84px" />
          <a-col :flex="'86px'" style="text-align: right">
            <a-space :size="18" direction="vertical">
              <a-button type="primary" @click="search">
                <template #icon>
                  <icon-search />
                </template>
                查询
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>

        <a-card>
          <a-button type="primary" @click="visible = true">
            <template #icon>
              <icon-plus />
            </template>
            新增
          </a-button>
          <a-table
            :columns="columns"
            :data="response"
            :pagination="pagination"
            @page-change="onPageChange"
          >
            <template #operations="{ record }">
              <a-button size="small" type="text" @click="show(record)">
                查看
              </a-button>
              <a-button size="small" type="text" @click="update(record)">
                修改
              </a-button>

              <a-button size="small" type="text" @click="delte(record)"
                >删除
              </a-button>
            </template>
          </a-table>
        </a-card>
      </a-card>
    </div>

    <!--    新增-->
    <a-modal
      v-model:visible="visible"
      width="70%"
      @cancel="handleCancelCreate"
      @ok="handleOkCreate"
    >
      <template #title> 创建</template>
      <a-form :model="createRequest" layout="vertical">
        <a-space :size="16" direction="vertical">
          <a-card class="general-card">
            <a-row :gutter="80">
              <a-col :span="8">
                <a-form-item field="method" label="请求方式">
                  <a-select
                    v-model="createRequest.method"
                    :style="{ width: '320px' }"
                    placeholder="请选择请求方式"
                  >
                    <a-option>GET</a-option>
                    <a-option>POST</a-option>
                    <a-option>DELETE</a-option>
                    <a-option>PUT</a-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item field="path" label="请求地址">
                  <a-input
                    v-model="createRequest.path"
                    placeholder="请输入请求地址"
                  >
                  </a-input>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item field="name" label="接口名称">
                  <a-input
                    v-model="createRequest.name"
                    placeholder="请输入接口名称"
                  >
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-space>
      </a-form>
    </a-modal>

    <!--    修改-->
    <a-modal
      v-model:visible="visibleUpdate"
      width="70%"
      @cancel="handleCancelUpdate"
      @ok="handleOkUpdate"
    >
      <template #title> 修改</template>
      <a-form :model="updateRequest" layout="vertical">
        <a-space :size="16" direction="vertical">
          <a-card class="general-card">
            <a-row :gutter="80">
              <a-col :span="8">
                <a-form-item field="method" label="请求方式">
                  <a-select
                    v-model="updateRequest.method"
                    :style="{ width: '320px' }"
                    placeholder="请选择请求方式"
                  >
                    <a-option>GET</a-option>
                    <a-option>POST</a-option>
                    <a-option>DELETE</a-option>
                    <a-option>PUT</a-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item field="path" label="请求地址">
                  <a-input
                    v-model="updateRequest.path"
                    placeholder="请输入请求地址"
                  >
                  </a-input>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item field="name" label="接口名称">
                  <a-input
                    v-model="updateRequest.name"
                    placeholder="请输入接口名称"
                  >
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-space>
      </a-form>
    </a-modal>

    <!--    查看-->
    <a-modal
      v-model:visible="visibleShow"
      width="70%"
      @cancel="handleCancelShow"
      @ok="handleOkShow"
    >
      <template #title> 详情</template>
      <a-form :model="updateRequest" layout="vertical">
        <a-space :size="16" direction="vertical">
          <a-card class="general-card">
            <a-row :gutter="80">
              <a-col :span="8">
                <a-form-item field="method" label="请求方式">
                  <a-select
                    v-model="updateRequest.method"
                    :style="{ width: '320px' }"
                    placeholder="请选择请求方式"
                    disabled
                  >
                    <a-option>GET</a-option>
                    <a-option>POST</a-option>
                    <a-option>DELETE</a-option>
                    <a-option>PUT</a-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item field="path" label="请求地址">
                  <a-input v-model="updateRequest.path" disabled></a-input>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item field="name" label="接口名称">
                  <a-input v-model="updateRequest.name" disabled></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-space>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>
  .container {
    padding: 0 20px 20px 20px;
  }

  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }

  .action-icon {
    margin-left: 12px;
    cursor: pointer;
  }

  .active {
    color: #0960bd;
    background-color: #e3f4fc;
  }

  .setting {
    display: flex;
    align-items: center;
    width: 200px;

    .title {
      margin-left: 12px;
      cursor: pointer;
    }
  }
</style>
